<script setup lang="ts">
import { defineProps, reactive } from 'vue'
import type { TableRowSelection, TableColumnData } from '@arco-design/web-vue'

const props = defineProps(['list'])
const columns = reactive<TableColumnData[]>([
    {
        title: '专业',
        dataIndex: 'major',
    },
    {
        title: '开始时间',
        dataIndex: 'startTime',
    },
    {
        title: '开班状态',
        dataIndex: 'state',
    },
    {
        title: '剩余名额',
        dataIndex: 'SurplusQuota',
    },
    {
        title: '封班时间',
        dataIndex: 'closeTime',
    },
    {
        title: '操作',
        slotName: 'optional',
    },
])

const rowSelection = reactive<TableRowSelection>({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
})
</script>

<template>
    <div class="major-table">
        <a-table
            :columns="columns"
            :data="props.list"
            :row-selection="rowSelection"
        >
            <template #optional="{ record }">
                <a-link href="JavaScript:;">修改</a-link>
                <span class="divisionTag">|</span>
                <a-link href="JavaScript:;">完成</a-link>
            </template>
        </a-table>
    </div>
</template>

<style lang="scss" scoped>
.major-table {
    // width: 100%;
    // height: 100%;
    .divisionTag {
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        color: #ddd;
    }
}
</style>

<style>
.major-table .arco-table-th {
    background-color: #1890ff !important;
    color: #fff !important;
}

.major-table thead .default_pointer_cs,
.major-table thead .arco-checkbox-icon {
    display: none !important;
}
</style>
